<template>
  <div>
    <!-- <live-player
      id="player"
      src="rtmp://pull.lovekaka.cn/akk/test"
      mode="live"
      autoplay
      orientation="horizontal"
      @statechange="statechange"
      @error="error"
      style="width: 100%; height: 300rpx;"
    />-->
    <live-player
      id="player"
      class="myplayer"
      src="rtmp://58.200.131.2:1935/livetv/hunantv"
      mode="live"
      autoplay
      @statechange="statechange"
      style="width: 100%; height: 300rpx;"
      @error="error"
    >
      <cover-view class="screen" @click="fullScreen">{{isFullScreen? '退出全屏':'全屏'}}</cover-view>
      <!-- <cover-view > -->
      <cover-view v-if="isFullScreen" class="doommview">
        <div v-for="(item,index) in doommData" :key="index">
          <span class="aon" :style="{top:item.top+'%',color:item.color}"
          >{{item.text}}</span>
        </div>
      </cover-view>
      <!-- </cover-view> -->
    </live-player>
    <div v-if="!isFullScreen">
      <scroll-view style="height:235px" :scroll-y="true" :scroll-top="toLast">
        <div class="danmu" v-for="(item,index) in doommData" :key="index">{{item.text}}</div>
      </scroll-view>
    </div>
    <div class="sendbox">
      <input
        v-model="content"
        class="input-block"
        placeholder="说点儿什么吧~"
        placeholder-class="placeholder-part"
      />
      <button class="green" size="mini" @click="sendComment">发送</button>
      <button class="green" size="mini" @click="sendTest">自动发送测试</button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      content: '',
      toLast: '',
      isFullScreen: false,
      donghua: '',
      doommData: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    statechange (e) {
      console.log('live-player code:', e.target.code)
    },
    error (e) {
      console.error('live-player error:', e.target.code)
    },
    fullScreen () {
      const LivePlayerContext = wx.createLivePlayerContext('player')
      this.isFullScreen = !this.isFullScreen
      if (this.isFullScreen) {
        LivePlayerContext.requestFullScreen({
          direction: 90,
          success (res) {
            console.log(res)
          }
        })
      } else {
        LivePlayerContext.exitFullScreen({
          success (res) {
            console.log(res)
          }
        })
      }
    },
    sendComment () {
      if (this.content) {
        let cid = 1
        let data = {
          id: cid++,
          text: this.content,
          top: Math.ceil(Math.random() * 80),
          time: Math.ceil(Math.random() * 10),
          color: this.getRandomColor()
        }
        this.doommData.push(data)
        this.content = ''
        this.toLast = this.doommData.length * 1000
      } else {
        this.$toast('不能发送空白的消息')
      }
    },
    // 随机发送消息
    suiJiSendMsg () {
      let cid = 1
      var res = Math.random()
        .toString(36)
        .slice(-8)
      let data = {
        id: cid++,
        text: res,
        top: Math.ceil(Math.random() * 80),
        time: Math.ceil(Math.random() * 10),
        color: this.getRandomColor()
      }
      this.doommData.push(data)
      this.content = ''
      this.toLast = this.doommData.length * 1000
    },
    sendTest () {
      let time = parseInt(Math.random() * 10000 + 3)
      var myVar = setInterval(() => {
        this.suiJiSendMsg()
      }, time)
      if (this.doommData.length > 100) {
        clearInterval(myVar)
      }
    },
    getRandomColor () {
      let rgb = []
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16)
        color = color.length === 1 ? '0' + color : color
        rgb.push(color)
      }
      return '#' + rgb.join('')
    }
  }
}
</script>
 
<style lang="scss" scoped>
@import "static/styles/color.scss";
.danmu {
  background: rgba($color: #000, $alpha: 0.3);
  padding: 5px 10px;
  border-radius: 10px;
  width: 30%;
  margin: 10px;
}
.sendbox {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  .green {
    background-color: $green;
  }
}
.myplayer {
  position: relative;
  .screen {
    position: absolute;
    bottom: 5px;
    right: 10px;
    background: rgba($color: #eeeeee, $alpha: 0.5);
    z-index: 2;
    padding: 2px 5px;
  }
}
.aon {
  position: absolute;
  white-space: nowrap; /* 防止向下换行*/
  animation-timing-function: linear;
  animation-fill-mode: none;
  animation: first 10s linear forwards;
}
.doommview {
  z-index: 3;
  height: 80%;
  width: 100%;
  position: absolute;
}
@keyframes first {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}
</style>
